<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="">
		<meta http-equiv="content-security-policy">
		<link href="css/mui.css" rel="stylesheet" />
		<style type="text/css">
			.register-button {
				background-color: #AAA;
				color: #555;
				font-size: 14px;
				width: 100%;
				margin-top: 20px;
				padding: 10px 0;
				display: true;
			}
			
			.edit-line {
				height: 1px;
				background-color: #AAAAAA;
				margin-top: -15px;
			}
			
			.edit-box {
				margin-top: 50px;
				border: none !important;
			}
		</style>
	</head>

	<body>
		<div>
			<input id="name" type="text" placeholder="昵称" class="edit-box" />
			<div id="nickname_line" class="edit-line" />
		</div>		
		<div>
			<input id="id" type="text" placeholder="手机号" class="edit-box" />
			<div id="id_line" class="edit-line" />
		</div>
		<div>
			<input id="password" type="password" placeholder="密码" class="edit-box" />
			<div id="name_line" class="edit-line" />
		</div>

		<div style="width: 100%; margin: 0 auto;">
			<button id="submit" type="button" class="register-button">注册</button>
		</div>

		<script src="js/mui.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			window.onload = function() {
				
				var eles = document.getElementsByClassName("edit-box");
				var submit = document.getElementById("submit")
				for (let ele of eles) {
					ele.addEventListener("focus", function () {
						this.nextElementSibling.style.backgroundColor = "#2AC845";
					});
					ele.addEventListener("blur", function () {
						this.nextElementSibling.style.backgroundColor = "#AAAAAA";
					});
					ele.addEventListener("input", function () {
						var isAllFilled = true;
						for (let e of eles) {
							isAllFilled = isAllFilled && e.value != "";
						}
												
						if (isAllFilled) {
							submit.style.backgroundColor = "#2AC845";
							submit.style.color = "#FFFFFF";
							submit.style.disabled = false;
						} else {
							submit.style.backgroundColor = "#AAAAAA";
							submit.style.color = "#555555";
							submit.style.disabled = true;
						}
					});
				}

				submit.addEventListener("tap", function() {
					var params = {};
					for (let ele of eles) {
						params[ele.id] = ele.value.toString();
					}
					console.log(JSON.stringify(params));
					mui.ajax(app.serverAddress + "/u/r", {
						data: params,
						dataType: 'jsonp',
						jsonp: "callback",
						type: 'post',
						timeout: 10000,
						headers:{'Content-Type':'application/json'},
						success: function(data) {
							var o = JSON.parse(data);
							if (o.status == 200)
								mui.openWindow("login.html");
							else
								alert("User is not registered!");
						},
						error: function(xhr, type, errorThrown) {
							
						}
					})
				});
			}
		</script>
	</body>

</html>
